<template>
    <div class="header-container">
        <div class="l-content">
            <el-button style="margin-right: 20px;" @click="handleMenu" icon="el-icon-menu" size="mini" ></el-button>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in tags" :key="item.path"><span  style="cursor: pointer;" @click="changeMenu(item)">{{ item.label }}</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">
                    <img class="user" :src="showImg()" onerror="this.src='user.jpg';this.onerror=null"/>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item command="cancel">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import Cookie from 'js-cookie'
export default {
    data(){
        return {
            img:null,
        }
    },
    methods: {
        convertToImage(binaryString) {
          const byteCharacters = atob(binaryString); // 将base64编码的二进制字符串解码为原始字节流
          const byteArrays = [];
            for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                const slice = byteCharacters.slice(offset, offset + 512);
                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                  }
              const byteArray = new Uint8Array(byteNumbers);
              byteArrays.push(byteArray);
            }
          const blob = new Blob(byteArrays, { type: 'image/jpeg' }); // 根据实际情况设置MIME类型
          return URL.createObjectURL(blob); // 生成URL
        },
        showImg(){
          return this.convertToImage(this.img)
        },
        getUserInfo(){
          this.$axios.get('/getUserInfo').then(({data}) => {// 请求成功，返回
                if(data.code===200){
                    this.img=data.data.user.img
                }else{
                    this.$message({
                        type: 'error',
                        message: data.data.message
                    });
                }
            })
            .catch((err) => {// 请求失败
                console.log(err);
            });
        },
        changeMenu(item){
            if(this.$route.path !== item.path) {
                    this.$router.push(item.path)
            }
        },
        handleMenu(){
            this.$store.commit('collapseMenu')
        },
        clickMenu(item){
            //当页面路由与跳转路由不一致时从允许跳转
            console.log(item)
            if(this.$route.path !== item.path && !(this.$route.path==='/home' && (item.path === '/'))) {
                this.$router.push(item.path)
            }
        },
        handleClick(command){
            if(command==='cancel'){
                Cookie.remove('token')
                Cookie.remove('permission')
                Cookie.remove('menu')
                if(this.$route.path !== "/login") {
                    this.$router.push("/login")
                }
            }else if(command==="personalCenter"){
                if(this.$route.path !== "/personalCenter") {
                    this.$router.push("/personalCenter")
                }
            }
        }
    },
    computed:{ 
        ...mapState({
            tags: state => state.tab.tabsList
        })
    },
    mounted(){
        this.getUserInfo()
    }
}
</script>
<style lang="less" scoped>
    .header-container {
        background-color: #333;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        .text{
            color: #fff;
            font-size: 14px;
            margin-left: 10px;
        }
        .r-content{
            .user{
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .l-content{
            display: flex;
            align-items: center;
            /deep/.el-breadcrumb__item {
                .el-breadcrumb__inner{
                    font-weight: normal;
                    &.is-link{
                        color: #666;
                    }
                }
                &:last-child{
                    .el-breadcrumb__inner{
                        color: #fff;
                    }
                }
            }
        }
    }
</style>